<template>
  <top-item title="累计用户数" :value="numberFormat(usersTotal)">
    <template #default>
      <div id="user"></div>
    </template>
    <template #footer>
      <div class="footer">
        日同比 <span>{{ userGrowthLastDay }}%</span>
        月同比 <span>{{ userGrowthLastMonth }}%</span>
      </div>
    </template>
  </top-item>
</template>

<script setup lang="ts">
import { onMounted, watch, computed } from 'vue'

import topItem from './top-item.vue'
import * as echarts from 'echarts'
import { useReportInfoData } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const { numberFormat, moneyFormat } = useFormat()
const reportInfoDataStore = useReportInfoData()
let userChart: any
onMounted(() => {
  userChart = echarts.init(document.querySelector('#user') as HTMLElement)

  window.addEventListener('resize', () => {
    userChart?.resize()
  })
})
const usersTotal = computed(() => reportInfoDataStore.reportData.usersTotal)
const usersLastMonth = computed(() => reportInfoDataStore.reportData.usersLastMonth)
const userGrowthLastDay = computed(() => reportInfoDataStore.reportData.userGrowthLastDay)
const userGrowthLastMonth = computed(() => reportInfoDataStore.reportData.userGrowthLastMonth)

watch(() => reportInfoDataStore.reportData, () => {
  userChart.setOption({
    xAxis: {
      type: 'value',
      show: false,
      min: 0, // x 轴最小值
      max: usersTotal.value, // x 轴最大值 
    },
    yAxis: {
      type: 'category',
      data: ['用户增长量'],
      show: false,
    },
    series: [
      {
        // name: '用户增长',
        type: 'bar',
        data: [usersTotal.value - usersLastMonth.value],
        barWidth: 10,
        showBackground: true, // 展示背景
        itemStyle: { // 柱条样式
          color: 'yellowgreen'
        },
        // 柱条显示的内容
        label: {
          show: true,
          formatter: '|',
          position: 'right',
          color: 'yellowgreen'
        }
      }
    ],
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    tooltip: {
      trigger: 'axis',
      confine: true,
    }
  })

})
</script>

<style scoped>

</style>